{include file="public/head"/}
<div class="container-fluid" id="main">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>

        <div class="ntDesktop">
            <div class="ntDesktop-head">{:lang("container_list")}</div>
            <div class="col-md-6">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#" data-toggle="tab" @click.prevent="statuschange('')">{:lang('all')}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(1)">{:lang("prepare")}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(2)">{:lang("loading_container")}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(3)">{:lang("departures")}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(4)">{:lang("arrive")}</a>
                    </li>
                    <li>
                        <a href="#" data-toggle="tab" @click.prevent="statuschange(5)">{:lang("finish")}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 text-right">
                <div>
                    <!-- <a href="/admin/logistics/containerchang" class='btn btn-primary' data-toggle="modal"
                       data-target="#container_batModal"
                       stytle="margin-right:20px"><span class="glyphicon glyphicon-pencil"></span> {:lang("change_status_in_batch")}</a> -->
                    <a href="#" class='btn btn-primary' data-toggle="modal" stytle="margin-right:20px" @click="banckchangestatus"><span class="glyphicon glyphicon-pencil"></span> {:lang("change_status_in_batch")}</a>

                    <a href="/admin/logistics/containeradd" class='btn btn-primary' data-toggle="modal"
                       data-target="#container_addModal"
                       stytle="margin-right:20px"> <span class="glyphicon glyphicon-plus"></span> {:lang("add_new_container")}</a>
                </div>
            </div>


            <div class="row clearfix">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable">
                        <thead>
                        <tr>
                            <th style="text-align:center"><input type="checkbox" @click="allsel" /> </th>
                            <th class="sorting" @click="sortfun(1,'id')"> {:lang('serial_number')} </th>
                            <th> {:lang("name/type")} </th>
                            <th> {:lang("place_of_departure")} </th>
                            <th> {:lang("destination")} </th>
                            <th class="sorting"  @click="sortfun(1,'arrival_day')"> {:lang('status')} </th>
                            <th> {:lang("carrier/SO")} </th>
                            <th> {:lang("container_number/seal_number")} </th>
                            <th> {:lang("container_content")} </th>
                            <th> {:lang("goods_value")} </th>
                            <th class="sorting"  @click="sortfun(1,'update_at')"> {:lang('edit')} </th>
                            <th> {:lang('operate')} </th>
                        </tr>
                        </thead>
                        <tbody>
                            <template v-for="(item,index) in listdata" >
                                <tr class="tr-mid">
                                    <td colspan="3">{{item.date}}</td>
                                    <td colspan="9" align="right">
                                        货柜数量：{{item.sum_ctn}} <span class="unit">UN</span>，{:lang("goods_value")} {{item.sum_value}} <span class="unit">CNY</span>
                                    </td>
                                </tr>
                                <tr v-for="(element,index) in item.val" :key="element.id">
                                        <td align="center"><input type="checkbox" @click="onesel(element.id)"  /></td>
                                        <td> {{element.id}} <br>  {{element.code}} </td>
                                        <td> {{element.name}} <br> {{element.container_type_name}}</td>
                                        <td> {{element.port_start_name}} <br> {{element.co_id_start_name}}</td>
                                        <td> {{element.port_arrival_name}} <br> {{element.co_id_arrival_name}} </td>
                                        <td> {{element.status_time}} <br> {{element.status}} </td>
                                        <td> {{element.carriername!='' ? element.carriername:'-'}} <br> {{element.so_no!='' ? element.so_no:'-'}} </td>
                                        <td> {{element.container_no!='' ? element.container_no:'-'}} <br> {{element.seal_no!='' ? element.seal_no:'-'}} </td>
                                        <td>
                                            {{element.sum_kgs!=undefined ? element.sum_kgs:'-'}} <span class="unit">KGS</span> <br>
                                            {{element.sum_cbm!=undefined ? element.sum_cbm:'-'}} <span class="unit">CBM</span>
                                        </td>
                                        <td>
                                            {{element.sum_ctn!=undefined ? element.sum_ctn:'-'}} <span class="unit">CTN</span><br>
                                            {{element.sum_value!=undefined ? element.sum_value:'-'}} <span class="unit">CNY</span>
                                        </td>
                                        <td> {{element.mangname}} <br /><small> {{element.update_date}} </small></td>
                                        <td class="text-right">
                                            <div>
                                                <a :href="'/admin/logistics/containerdetail?id='+element.id" class='btn btn-sm btn-primary' ><span class="fa fa-search-plus"></span> {:lang('details')}</a>
                                                <a :href="'/admin/logistics/containeredit?id='+element.id" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#container_editModal"><span class="glyphicon glyphicon-pencil"></span> {:lang('edit')}</a>
                                                <a :href="'/admin/logistics/containerdayi?id='+element.id" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#print_settingModal"><span class="fa fa-print"></span> {:lang("print")}</a>
                                                <!--准备下状态下显示删除-->
                                                <a v-if="element.status=='READY'" href="#" class='btn btn-sm btn-default option-del' @click="apifun('containerdel',4,element.id,element.name)"><span class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                                                <!--装柜状态下显示开航-->
                                                <a v-if="element.status=='LOADING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etdday',1,element.id,element.name)"><span class="fa fa-ship"></span>{:lang("set_sail")}</a>
                                                <!--出发状态下显示{:lang("arrived_at_the_port")}，{:lang("cancel_sail")}-->
                                                <a v-if="element.status=='SALLING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etaday',2,element.id,element.name)"><span class="fa fa-shipping-fast"></span>{:lang("arrived_at_the_port")}</a>
                                                <a v-if="element.status=='SALLING'" href="#" class='btn btn-sm btn-primary' @click="apifun('etdday',11,element.id,element.name)">{:lang("cancel_sail")}</a>

                                                <!--到达状态下显示入仓，取消{:lang("arrived_at_the_port")}-->
                                                <a v-if="element.status=='ARRIVE'" href="#" class='btn btn-sm btn-primary' @click="apifun('arrivalday',3,element.id,element.name)"><span class="fa fa-dolly"></span>{:lang("storage")}</a>
                                                <a v-if="element.status=='ARRIVE'" href="#" class='btn btn-sm btn-primary' @click="apifun('etaday',22,element.id,element.name)">{:lang("cancel_arrival")}</a>
                                                <!--完成状态下显示取消入仓-->
                                                <a v-if="element.status=='DISCHARGE'" href="#" class='btn btn-sm btn-primary' @click="apifun('arrivalday',33,element.id,element.name)">{:lang("cancel_storage")}</a>
                                            </div>
                                        </td>
                                    </tr>
                            </template>
                        </tbody>
                    </table>
                    <ul class="pagination" id="pagination">
                    </ul>
                    <input type="hidden" id="msg" value="请选择要批量操作的内容">
                </div>
            </div>
        </div>
    </div>
<!--添加弹窗部分 开始-->
<div class="modal fade" id="container_addModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 货柜编辑 结束-->
<div class="modal fade" id="container_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 改变状态 开始-->
<div class="modal fade" id="container_batModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 货柜打印设置-->
<div class="modal fade" id="print_settingModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="/static/Admin/js/container.js"></script>
{include file="public/foot"/}



